<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">日常检查记录详情</small>
      </a>
      <a href="javascript:;" class="tr">
        <small class="font_18 co_f"></small>
      </a>
    </header>
    <main>
      <div>
        <mt-navbar v-model="selected">
          <mt-tab-item id='tab-container1'>
            <font class="font_1">基本信息</font>
          </mt-tab-item>
          <mt-tab-item id='tab-container2'>
            <font class="font_1">文书处理</font>
          </mt-tab-item>
        </mt-navbar>
        <div class="bor"></div>
        <div class="page-tab-container">
          <mt-tab-container class="page-tabbar-tab-container" v-model="selected" swipeable>
            <mt-tab-container-item id="tab-container1">
              <table class="dailytable">
                <tr>
                  <th>执法人员</th>
                  <td>{{   this.$store.state.infoDatastate.checkPersonNames}}</td>
                  <th>执法证号</th>
                  <td>{{   this.$store.state.infoDatastate.checkPersonCodes}}</td>
                </tr>
                <tr>
                  <th>记录人</th>
                  <td>{{   this.$store.state.infoDatastate.userName}}</td>
                  <th>检查对象类别</th>
                  <td>{{   this.$store.state.infoDatastate.supervisionCheckObjectType}}</td>
                </tr>
                <tr>
                  <th>被检查对象</th>
                  <td>{{  this.$store.state.infoDatastate.unitArchiveName}}</td>
                  <th>法定代表人</th>
                  <td>{{   this.$store.state.infoDatastate.headPerson}}</td>
                </tr>
                <tr>
                  <th colspan="1">检查地址</th>
                  <td colspan="3">{{  this.$store.state.infoDatastate.inspectionPlace}}</td>
                </tr>
                <tr>
                  <th colspan="1">联系方式</th>
                  <td colspan="3">{{  this.$store.state.infoDatastate.contact}}</td>
                </tr>
                <tr>
                  <th colspan="1">检查时间</th>
                  <td colspan="3">{{  this.$store.state.infoDatastate.checkDate}}</td>
                </tr>
                <tr>
                  <th colspan="1">检查内容</th>
                  <td colspan="3">{{   this.$store.state.infoDatastate.checkContentStr}}</td>
                </tr>
                <tr>
                  <th colspan="1">是否有问题</th>
                  <td colspan="3">{{   this.$store.state.infoDatastate.isProgram}}</td>
                </tr>
                <tr>
                  <th colspan="1">最近一次检查时间</th>
                  <td colspan="3">{{  this.$store.state.infoDatastate.latelyCheckDate}}</td>
                </tr>
                    <tr>
                  <th>
                    问题严重程度</th>
                  <td>{{   this.$store.state.infoDatastate.programSeverity}}</td>
                  <th>是否立案</th>
                  <td>{{   this.$store.state.infoDatastate.isFiling}}</td>
                </tr>
                <tr>
                  <th>
                    问题描述
                  </th>
                  <td colspan="3">
                    {{   this.$store.state.infoDatastate.programDescribeStr}}
                  </td>
                </tr>
                 <tr>
                  <th>
                    整改日期</th>
                  <td>{{  this.$store.state.infoDatastate.rectDate}}</td>
                  <th>整改情况</th>
                  <td>{{   this.$store.state.infoDatastate.rectSituation}}</td>
                </tr>
                 <tr>
                  <th>
                    整改提醒周期*
                  </th>
                  <td colspan="3">
                      {{   this.$store.state.infoDatastate.rectReminderCycle}}
                  </td>
                </tr>
                 <tr>
                  <th>
                    整改提醒时间点*
                  </th>
                  <td colspan="3">
                     {{this.$store.state.infoDatastate.rectReminderDate}}
                  </td>
                </tr>
                 <tr>
                  <th>
                    整改到位（情况说明）
                  </th>
                  <td colspan="3">
                      {{this.$store.state.infoDatastate.rectNoteStr}}
                  </td>
                </tr>
                 <tr>
                  <th colspan="1">备注</th>
                  <td colspan="3">{{this.$store.state.infoDatastate.note}}</td>
                </tr>
              </table>
                <app-upload :getuniddata="imgData.getuniddata" 
                    :UserUnid="imgData.UserUnid"
                    :AliasData="imgData.AliasData"
                    :AliasDataSort="imgData.AliasDataSort" 
                    :uploadmsg="imgData.uploadmsg" 
                    :no="imgData.no" 
                    :upbtn="imgData.upbtn"></app-upload>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab-container2">
               <div class="mtrademark-list-info" v-for="(item,index) in this.$store.state.documents">
                   <router-link  @click.native="routerto(item.documentConfig.documentOrder,item.documentDataIsSave,item.documentCheckNumber)" :to="{name:name}">
                    <div class="mtrademark-list-right">
                      <p ng-bind-html="o.name.replace('<em>','')" class="ng-binding">
                        文书名称{{item.documentName}}
                      </p>
                      <p><span class="ng-binding">是否公示: {{item.isPublic}}</span></p>
                      <p><span class="ng-binding">检查日期:{{item.versionDate}} </span></p>
                    </div>
                  </router-link>
                </div>
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import AppUpload from '@/components/upload'
  import {
    DataUnid,Documents
  } from '../../../api/api';
  import {
    TabContainer,
    TabContainerItem,
    Navbar,
    TabItem
  } from 'mint-ui';
  export default {
    components: {
      'app-upload': AppUpload,
      'mt-tab-container': TabContainer,
      'mt-tab-container-item': TabContainerItem,
      'mt-navbar': Navbar,
      'mt-tab-item': TabItem
    },
    
    data() {
      return {
        selected: 'tab-container1',
        data: "",
        infoData: {},
        documents:[],
        imgData: {
          getuniddata:this.$route.query.Unid,
          UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
          AliasData: '',
          AliasDataSort: '',
          uploadmsg: '查看附件信息',
          no: false,
          upbtn: false,
        }
      };
    },
    methods: {
    
      getData() {
        let options = {
          params: {
            Unid:this.$route.query.Unid,
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
          }
        }
        //调取接口
        DataUnid(options).then((res) => {
          if (res.success === true) {
               this.infoData  = res.data;
               this.$store.state.infoDatastate = res.data ;
          }
        })
      },
       Documents() {
        let options = {
          params: {
            SupervisionRecordUnid: this.$route.query.Unid,
          }
        }
        //调取接口
        Documents(options).then((res) => {
          if (res.success === true) {
            this.$store.state.documents = res.data; 
              localStorage.removeItem('checkunid');
              localStorage.setItem('checkunid', JSON.stringify({
                             checkunid:this.$route.query.Unid,
                            }));
          }
        })
      },
      routerto(code,type,documentCheckNumber) {
        if(type!=null){
        switch (code) {
          case (1):
            {  //餐饮服务日常监督检查要点表
               this.$router.push({name: 'Supervisiondetail1', query:{documentCheckNumber:documentCheckNumber}});
               break
            };
          case (3):
            {
              //监督意见书
            this.$router.push({name: 'Supervisiondetail2', query:{documentCheckNumber:documentCheckNumber}});
              break
            };
          case (8):
            { //现场检查笔录
              this.$router.push({name: 'Supervisiondetail3', query:{documentCheckNumber:documentCheckNumber}});
              break
            };
          case (12):
            {
              //查封（扣押）决定书
              this.$router.push({name: 'Supervisiondetail4', query:{documentCheckNumber:documentCheckNumber}});
              break
            };
          case (15):
            { //查封（扣押）延期通知书
         this.$router.push({name:'Supervisiondetail5',  query:{documentCheckNumber:documentCheckNumber}});
              break
            };
          case (20):
            { //责令改正通知书
             this.$router.push({name: 'Supervisiondetail6', query:{documentCheckNumber:documentCheckNumber}});
              break
            };
          case (38):
            { //送达回执
            this.$router.push({name: 'Supervisiondetail7', query:{documentCheckNumber:documentCheckNumber}});
              break
            };
            break;
        };
        }
      else{
         this.$message.error("责令改正通知书文书还未处理，请先处理责令改正通知书再查看！");
      }
 
      },
    },
    //页面加载时候
    mounted() {
      this.getData();
      this.Documents();
    },
  }
</script>

<style lang="scss" scoped>
  /*tab*/
  
  .mint-navbar {
    background: #efefef;
    padding: 0% 20%;
  }
  
  .mint-navbar .mint-tab-item.is-selected {
    background: #feaa50;
    color: #fff;
    border-bottom: none;
    margin-bottom: auto;
  }
  
  .mint-tab-item {
    border: 1px solid #feaa50 !important;
    padding: 10px !important;
    margin: 6px 0px
  }
  
  .mtrademark-list-info a {
    padding: 10px 10px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #ccc;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center
  }
  
  .mtrademark-list-right {
    float: left;
    line-height: normal;
    margin-left: 10px;
  }
  
  .mtrademark-list-right p:first-child {
    margin-bottom: 5px;
    font-size: 16px;
    color: #000
  }
  
  .mtrademark-list-right p {
    font-size: 12px;
    color: #43464f;
    display: block;
    margin: 0;
  }
  
  .mtrademark-list-right span {
    display: block;
    margin-top: 6px;
  }
  
  #mtrademark-list-right-status {
    display: table;
    margin: 10px 0;
    border: 1px solid #5BC67C;
    color: #5BC67C;
    float: left;
    padding: 2px;
    border-radius: 2px;
  }
  
  .dailytable {
    width: 98%;
    margin: 10px auto;
    border-collapse: collapse;
    th {
      background: #f5f7fa;
      color:#878d99
    }
    td {
      padding: 8px 0px 8px 2px !important;
    }
  }
  
  .dailytable td,
  .dailytable th {
    border: 1px solid #e6ebf5;
    padding: 8px 0px;
    width: 25%;
  }
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
